<script setup lang="ts">
import { addJueSeApi, getJueSeWeiHuApi, getTreeApi } from '@/api/system'
import { Plus, Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted } from 'vue'
import { ref } from 'vue'
import { usetreeStore } from '@/stores/index'
import { convertTreeLabel } from '@/utils/publicMethods'
import type Node from 'element-plus/es/components/tree/src/model/node'
import addChange from './components/addChange.vue'

const treeStore = usetreeStore()
const subClsTreeData = ref<any>([])
const YingYongTree = (tree: any) => {
  return tree.map((node: any) => {
    const convertedNode = {
      attributes: node.attributes ? node.attributes : undefined,
      // checked: node.checked,
      children: node.children ? YingYongTree(node.children) : undefined,
      id: node.id,
      parent: node.parent,
      state: node.state,
      label: node.text
    }
    return convertedNode
  })
}
const defaultProps = {
  children: 'children',
  label: 'label',
  value: 'value',
  disabled: function (data: any, node: any) {
    if (node && node.level > 1) {
      return false
    } else {
      return true
    }
  }
}
// 获得分类数据
const getSubClsTree = async () => {
  const params = {
    sqlId: 'appClassMgr.getAppClass',
    id: 0
  }
  await getTreeApi(params)
    .then((res: any) => {
      // console.log(res)
      subClsTreeData.value = JSON.parse(JSON.stringify(YingYongTree(res)))
      treeStore.setAppTree(subClsTreeData.value)
    })
    .catch(() => {
      ElMessage({ message: '分类数据获取失败', type: 'error' })
    })
}

const subClsTreeArry = JSON.parse(JSON.stringify(convertTreeLabel(treeStore.appTreeList)))
// 树结构懒加载
const subClsTreeFn = (node: Node, resolve: (data: any[]) => void) => {
  // console.log(node)
  // 树形结构地域
  if (node.level === 0) {
    const info = subClsTreeArry.map((item: any) => {
      return {
        value: item.value,
        label: item.label,
        children: item.children
      }
    })
    return resolve(info)
  }

  if (node.level > 1) {
    if (!node.data.children) {
      return resolve([])
    } else {
      setTimeout(() => {
        const data = node.data.children
        resolve(data)
      }, 100)
    }
  }
  setTimeout(() => {
    const data = node.data.children
    resolve(data)
  }, 100)
}
const loading = ref(false)
const indexMethod = (index: number) => index + 1
const tableData = ref([])
const tableTotal = ref(0)
const searchForm = ref<any>({
  rptName: '',
  rptCls: '',
  page: 1,
  rows: 10
})
const getList = async () => {
  loading.value = true
  const params = {
    sqlId: 'xlsReportMgr.getRptCfg',
    sqlParam: JSON.stringify({
      rptName: searchForm.value.rptName,
      rptCls: searchForm.value.rptCls[0] ? searchForm.value.rptCls[0] : ''
    }),
    pagination: true,
    page: searchForm.value.page,
    rows: searchForm.value.rows
  }
  await getJueSeWeiHuApi(params)
    .then((res: any) => {
      tableData.value = res.rows
      tableTotal.value = res.total
    })
    .catch(() => {
      ElMessage({ message: '数据请求失败', type: 'error' })
    })
    .finally(() => {
      loading.value = false
    })
}
const SearchBtn = () => {
  getList()
  console.log(searchForm.value)
}

const deleteBtn = (row: any) => {
  console.log(row)
  const params = {
    sqlId: JSON.stringify(['xlsReportMgr.deleteRptCfg', 'appInfo.deleteAppClassRela']),
    sqlParam: JSON.stringify({
      app_id: row.app_id
    })
  }
  ElMessageBox.confirm('你确定要删除本静态报表？', '删除静态报表', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await addJueSeApi(params)
        .then((res: any) => {
          if (res === 'success') {
            getList()
            ElMessage({ message: '删除成功', type: 'success' })
          } else {
            ElMessage({ message: '删除失败', type: 'error' })
          }
        })
        .catch(() => {
          ElMessage({ message: '删除失败', type: 'error' })
        })
    })
    .catch(() => {
      ElMessage({ message: '已取消删除', type: 'info' })
    })
}

const isShow = ref(false)
const title = ref('新增属性维护')
const formInfo = ref<any>({})
const AddBtn = () => {
  title.value = '新增属性维护'
  formInfo.value = {}
  isShow.value = true
  // console.log('添加应用')
}
const changeBtn = (row: any) => {
  console.log(row)
  title.value = '修改属性维护'
  formInfo.value = row
  isShow.value = true
}
const handleSizeChange = (val: number) => {
  searchForm.value.page = 1
  searchForm.value.rows = val
  getList()
}
const handleCurrentChange = (val: number) => {
  searchForm.value.page = val
  getList()
}

onMounted(() => {
  getSubClsTree()
  getList()
})
</script>
<template>
  <div class="jintaiBox">
    <el-form :inline="true" :model="searchForm" style="margin-top: 15px">
      <el-form-item label="报表名称:">
        <el-input v-model="searchForm.rptName" placeholder="请输入报表名称 " />
      </el-form-item>
      <el-form-item label="分类目录:">
        <el-tree-select
          lazy
          :load="subClsTreeFn"
          :props="defaultProps"
          :cache-data="subClsTreeArry"
          v-model="searchForm.rptCls"
          multiple
          :multiple-limit="1"
          node-key="value"
          :render-after-expand="false"
          style="width: 240px"
          check-strictly
          check-on-click-node
        />
        <!-- <el-input v-model="searchForm.rptCls" placeholder="请输入分类目录 " /> -->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="SearchBtn">查询</el-button>
        <el-button type="success" plain :icon="Plus" @click="AddBtn">添加属性</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      border
      style="width: 100%"
      class="TableBox"
    >
      <el-table-column type="index" :index="indexMethod" align="center" width="50" />
      <el-table-column prop="app_name" label="报表名称" />
      <el-table-column prop="app_description" label="报表描述" />
      <el-table-column prop="file_path" label="文件路径" />
      <el-table-column prop="req_user" label="需求人" />
      <el-table-column prop="etl_flow" label="ETL流程" />
      <el-table-column prop="etl_node" label="ETL节点" />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button text type="primary" @click="changeBtn(scope.row)">修改</el-button>
          <el-button type="danger" text @click="deleteBtn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="paginationBox"
      v-model:current-page="searchForm.page"
      v-model:page-size="searchForm.rows"
      :page-sizes="[10, 20, 30, 40]"
      size="default"
      :disabled="false"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
  <addChange
    v-if="isShow"
    v-model:is-show="isShow"
    :title="title"
    :form-info="formInfo"
    @get-list="getList"
  />
</template>
<style scoped lang="less">
.jintaiBox {
  height: calc(100vh - 200px);
  position: relative;
  padding: 0 8px;
  .TableBox {
    height: calc(100vh - 270px);
  }
  .jintaiTableBox {
    .el-button {
      padding: 0;
    }
  }
  .paginationBox {
    position: fixed;
    bottom: 20px;
  }
}
</style>
